<template>
    <div class="item">
        <div>
            <i :class="['iconfont' ,sendPanel.icon]" :style="{color:sendPanel.color}"></i>
        </div>
        <div>
          <ul>
            <li>{{sendPanel.title}}</li>
            <li>{{sendPanel.count}}</li>
          </ul>
        </div>
      </div>
</template>

<script>
    export default {
      props:{
         sendPanel:{
              type:Object,
             required:true
          }
      }  
    }
</script>

<style lang="less" scoped>
.item {
  display: flex;
  background-color: white;
  height: 80px;
  div:nth-child(1) {
    flex: 0 0 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconfont {
      font-size: 36px;
    }
  }
  div:nth-child(2) {
    flex: 1;
    ul {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}
</style>